<template>
	<cmDialog v-model="visible" :modal-title="update ? '新增' : '修改'">
		<div style="padding: 20px 40px">
			<el-form ref="updateRoleRef" :model="updateRoleForm" :rules="updateRoleRules" label-width="80px">
				<el-form-item label="角色名称" prop="roleName">
					<el-input v-model="updateRoleForm.roleName" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="角色编码" prop="roleCode">
					<el-input v-model="updateRoleForm.roleCode" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="角色说明" prop="roleDesc">
					<el-input v-model="updateRoleForm.roleDesc" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="状态" prop="iflag">
					<el-radio-group v-model="updateRoleForm.iflag" class="ml-4">
						<el-radio :value="1" size="large">正常</el-radio>
						<el-radio :value="2" size="large">禁止</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="dialog-foot">
				<el-button @click="handleAddCancel">取消</el-button>
				<el-button type="primary" @click="handleAddFormSubmit(updateRoleRef)">确定</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script lang="ts" setup>
import cmDialog from '@/components/cm-dialog/index.vue'
import { reactive, ref } from 'vue'

import { roleSaveApi } from '@/api/system/rbac'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['submitSuccess', 'closeDialog'])

const visible = ref(false)
const update = ref(false)

interface roleObj {
	roleName: string
	roleCode: string | number
	id: string | number
	roleDesc: string
	iflag: string | number
}
let updateRoleForm = ref<roleObj>({ roleName: '', roleCode: '', id: '', roleDesc: '', iflag: '' })

const updateRoleRules = reactive<FormRules>({
	roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
	roleCode: [{ required: true, message: '请输入状态', trigger: 'change' }],
	roleDesc: [{ required: true, message: '请输入角色说明', trigger: 'blur' }],
	iflag: [{ required: true, message: '请输入角色状态', trigger: ['blur', 'change'] }]
})
const updateRoleRef = ref<FormInstance>()

const init = (isUpdate: boolean, row: any) => {
	visible.value = true
	update.value = isUpdate

	if (isUpdate) {
		// true-新增  、false-编辑
		// 重置画面数据
		const obj = { roleName: '', roleCode: '', id: '', roleDesc: '', iflag: 1 }
		updateRoleForm.value = obj
	} else {
		Object.assign(updateRoleForm.value, row)
	}
	// console.log(updateRoleForm.value)
}

const handleAddCancel = () => {
	updateRoleRef.value?.resetFields()
	visible.value = false
}

const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			roleSaveApi(updateRoleForm.value).then((res: any) => {
				ElMessage.success('操作成功')
				visible.value = false
				emit('submitSuccess')
				formEl?.resetFields()
			})
		} else {
			console.log('提交错误', fields)
		}
	})
}
defineExpose({
	init
})
</script>
<style scoped>
.dialog-foot {
	text-align: center;
}
</style>
